<template>
  <dl class="introduce">
    <dd v-for="(item, index) in list" :key="index">
      <div>
        <span>{{ $t(item.title) }}</span>
        <span>{{ $t(item.title1) }}</span>
      </div>
      
      <NuxtImg :src="item.img" alt="" />
      <p>{{ $t(item.text) }}</p>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { reactive } from "vue";

let list = reactive([
  {
    img: "/img/bb3.png",
    title: "language.business.ititle1",
    title1: "language.business.ititle11",
    text: "language.business.itext1",
  },
  {
    img: "/img/bb4.png",
    title: "language.business.ititle2",
    title1: "language.business.ititle21",
    text: "language.business.itext2",
  },
  {
    img: "/img/bb5.png",
    title: "language.business.ititle3",
    title1: "language.business.ititle31",
    text: "language.business.itext3",
  },
]);
</script>

<style scoped lang="scss">
.introduce {
  position: relative;
  color: #fff;
  width: 100%;
  @include flex(row, space-between, flex-start);
  padding: 40px 0;
  height: 100%;
  div {
    @include flex(column,flex-start, flex-start);
    span {
      font-size: 30px;
      color: #fff;
    }
    span:nth-child(2){
      color:#b5bac8 ;
      font-size: 18px;
      display: block;
      margin-top: 5px;
    }
  }

  dd {
    flex: 1;
    height: 100%;
    padding: 10px 22px 16px;
    box-sizing: border-box;
    position: relative;

    ::after {
      content: "";
      display: block;
      position: absolute;
      height: 100%;
      right: 0;
      top: 0;
      width: 2px;
      background-color: #32353e;
    }

    border-radius: 10px;
    margin-bottom: 15px;

    img {
      width: 100%;
      margin: 25px 0;
    }

   

    p {
      font-size: 16px;
      color: #999;
    }
  }

  dd:last-child {
    ::after {
      display: none;
    }

  }
}
</style>
